<template>
    <li :class="cns" ref="eli" :style="style">
        <icon v-if="icon" class="ph-icon-left" :icon="icon"/>
        <slot></slot>
        <icon v-if="iconRight" class="ph-icon-right" :icon="iconRight" :right-fixed="true"/>
    </li>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, defineExpose, defineProps, ref } from 'vue'
const Icon = defineAsyncComponent(()=>import("../base/icon.vue"))
const props = defineProps({
    icon:String,
    iconColor:String,
    iconRight:String,
    iconrightColor:String
})
const eli = ref<{[k:string]:string}>({})
const cns = computed(()=>{
    return {
        'ph-list-item':true
    }
})
const style = computed(()=>{
    const style = {} as Record<string,unknown>
    if(props.iconColor)style['--ph-list-ic'] = props.iconColor
    if(props.iconrightColor)style['--ph-list-ric'] = props.iconrightColor
    return style
})
defineExpose({
    getText:()=>eli.value.innerText
})
</script>

<style lang="scss">
.ph-list-item{
    position:relative;
    border-width: 1px;
    border-style: solid;
    border-color: var(--ph-bd-light);
    margin-top: -1px;
    border-left:none;
    border-right: none;
    background-color: transparent;
    transition: background-color .3s ease;
    width: 100%;
    padding:var(--ph-list-item-padding,var(--ph-8) var(--ph-15));
    text-align:var(--ph-list-item-align,default);
    white-space:var(--ph-list-item-wrap,normal);
    cursor:var(--ph-list-item-cursor,default);

    &:hover{
        background-color: var(--ph-light-l1);
        color: var(--ph-c-d1);
    }
    &:last-child{
        border-bottom: none;
    }
    .ph-icon-left{
        color: var(--ph-list-ic,inherit);
        margin-right:var(--ph-5);
    }
    .ph-icon-right{
        color: var(--ph-list-ric,inherit);
    }
}
</style>